/* SPDX-License-Identifier: Apache-2.0 */

/*
  Navigation breadcrumbs.

  <nav aria-label="Breadcrumb" class="breadcrumbs">
    <ul>
      <li class="breadcrumbs__breadcrumb"></li>
      <li class="breadcrumbs__breadcrumb"></li>
    </ul>
  </nav>
*/


.breadcrumbs {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: $half-spacing-unit;
  margin-top: $spacing-unit;
  padding-left: $half-spacing-unit;
  padding-right: $half-spacing-unit;

  + div {
    margin-top: $half-spacing-unit;
  }

  @media only screen and (max-width: $tablet) {
    display: none;
  }

  ul {
    margin: 0;
    padding: 0;
    @include clearfix;
  }

  &__breadcrumb {
    color: grayscale($primary-color);
    display: inline-block;
    float: left;
    list-style-type: none;

    &:first-child {
      color: $text-color;
    }

    a {
      @include link-without-underline;
    }

    .fa {
      margin-left: 0.1em;
      margin-right: 0.1em;
    }

    &:not(:last-child)::after {
      content: "\f054";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      margin-left: 4px;
      margin-right: 6px;
      color: $light-grey;
      font-size: 12px;
    }
  }
}
